<template>
  <div class="song-item-select">
    <div class="song-list-header">
      <el-input v-model="query.keyword"
                placeholder="请输入关键词"
                size="small"
                style="width: 180px; margin-right: 6px;"
                @keypress.enter.native="fetchList(1)"></el-input>
      <el-button type="primary"
                 @click="fetchList(1)"
                 size="small">搜索</el-button>
      <el-popover placement="right"
                  width="650"
                  trigger="click">
        <el-table :data="selected"
                  empty-text="你没有选择歌曲哦~">
          <el-table-column property="name"
                           label="歌名"></el-table-column>
          <el-table-column property="singer"
                           align="center"
                           width="120px"
                           label="歌手"></el-table-column>
          <el-table-column label="操作"
                           align="center"
                           width="120px">
            <template slot-scope="{row}">
              <el-button type="text"
                         @click="remove(row)"
                         size="mini">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button slot="reference"
                   type="text"
                   style="float: right">已选择</el-button>
      </el-popover>
    </div>
    <el-table style="margin-top: 10px"
              :data="list"
              border>
      <el-table-column label="歌名"
                       show-overflow-tooltip
                       prop="name">
      </el-table-column>
      <el-table-column label="歌手"
                       show-overflow-tooltip
                       align="center"
                       width="150px"
                       prop="singer">
      </el-table-column>
      <el-table-column label="操作"
                       align="center"
                       width="120px">
        <template slot-scope="{row}">
          <template v-if="isSelect(row)">
            <el-button type="text"
                       size="mini"
                       disabled>已选择</el-button>
          </template>
          <template v-else>
            <el-button type="text"
                       size="mini"
                       @click="select(row)">选择</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="total, prev, pager, next"
                   background
                   hide-on-single-page
                   @current-change="fetchList"
                   :current-page.sync="query.page"
                   :page-size="query.limit"
                   style="display: flex;justify-content: center; margin-top: 8px"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { fetchList } from '../../api'

export default {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      list: [],
      total: 0,
      query: {
        keyword: '',
        limit: 8,
        page: 1
      }
    }
  },
  computed: {
    selected: {
      get () {
        return this.value
      },
      set (v) {
        this.$emit('change', v)
      }
    }
  },
  methods: {
    async fetchList (page) {
      const { data: { data, meta } } = await fetchList(this.query)
      this.list = data
      this.total = meta.total
    },
    select (row) {
      const { id, song_id, name, singer } = row
      this.selected.push({ id, song_id, name, singer })
    },
    isSelect (row) {
      return this.selected.findIndex(({ id }) => id === row.id) > -1;
    },
    remove (row) {
      this.selected = this.selected.filter(({ id }) => id !== row.id);
    },
  }
}
</script>

<style>
</style>